<!--@author vidy3587@gmail.com-->

<template>
  <div class="with-banner-padding">
    <div class="vote-host-bg">
      <div class="description">
        2021年8月20-2021年9月19日，东南大学联合戏度公司举办主持人大赛，按照话筒数量排名评选出东南大学剧本杀十佳主人。
        <span class="warning">主持人获得话筒的方式有如下三种：</span>
      </div>
      <div class="vote-method vote-method-1">
        <div class="method-description">
          玩家每次体验某个主持人带来的1次剧本杀，主持人即获得20个话筒。
        </div>
      </div>
      <div class="vote-method vote-method-2">
        <div class="method-description">
          玩家每日获得系统赠送的3个话筒，可向任意主持人赠送1-3个话筒。如未赠送，则于次日过期作废。
        </div>
      </div>
      <div class="vote-method vote-method-3">
        <div class="method-description">
          主持人邀请新用户注册戏度APP获得系统赠送20个话筒。
        </div>
      </div>
      <button @click="gotoRank" class="btn primary-btn rank-btn">查看排行榜</button>
    </div>
    <div class="row horizontal-middle search-row">
      <SearchBar @search="onSearch"></SearchBar>
    </div>
    <diV class="vote-zone has-bottom-out">
      <van-list
          :style="{height:listHeight}"
          class="vote-zone-list"
          v-model="loading"
          :finished="finished"
          :immediate-check="true"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
      >
        <div v-for="item in voteList" :key="item.number" class="vote-card" @click="gotoDetail(item)">
          <div class="vote-rank">
            <span class="row rank-col horizontal-middle">{{ item.number }}号</span>
            <span class="row rank-col horizontal-middle">第<span class="warning">{{ item.rank }}</span>名 <img
                class="fire-icon" src="@/assets/fire.png" alt=""></span>
          </div>
          <div class="vote-avatar-box">
            <img :src="item.headImgUrl" class="vote-avatar" alt="">
            <div class="vote-badge row">
              <span>{{ item.ticketNum }}</span>
              <img src="@/assets/mic.png" class="vote-mic" alt="">
            </div>
          </div>
          <div class="vote-player">
            {{ item.nickName }}
          </div>
          <button class="btn primary-btn small">帮TA做任务获取话筒</button>
          <button @click="giveTicket($event, item)" class="btn ghost-btn small">赠送话筒</button>
        </div>
      </van-list>

    </diV>
    <Modal :loading="isGiving" v-model="isModalShow">

      <div v-if="!isGiving">
        <div v-if="isGivingFailed">
          <div class="modal-image">
            <img class="smile-face" src="~@/assets/smile_face.png" alt="">
          </div>
          <div class="modal-content">
            话筒已送完，明天再来
            支持TA吧！
          </div>
        </div>
        <div v-else>
          <div class="modal-image">
            <img class="smile-face" src="~@/assets/success.png" alt="">
          </div>
          <div class="modal-content">
            赠送成功！
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>

import SearchBar from "@/pages/components/SearchBar";
import {getDmList} from "@/api/dm";
import Modal from "@/core/components/Modal";
import {giveTicket} from "@/api/shortVideo";
import {getUserIdAndNickNameFromRouteQuery} from "@/core/shared/getUserIdAndNickName";
import {evBus, updateDmEv} from "@/pages/evBus";

export default {
  name: "HostVote",
  components: {SearchBar, Modal},
  data() {
    this.pageSize = 10;
    this.pageNum = 1;
    this.searText = "";
    return {
      isGivingFailed: false,
      isGiving: false,
      loading: false,
      finished: false,
      isModalShow: false,
      /**@type {DmItem[]}*/
      voteList: [],
      error: null,
      isLoadOver: false,
      isLoading: false
    }
  },
  computed: {
    listHeight() {
      const rows = Math.ceil(this.voteList.length / 2);
      const cardHeight = 427;
      const listCalcHeight = cardHeight * rows;
      const backgroundHeight = 590;
      const backgroundBgSize = Math.ceil(listCalcHeight / backgroundHeight) ;
      // const rootFontSSize = parseInt(document.documentElement.style.fontSize);
      const rootFontSSize = 16;
      return backgroundBgSize * backgroundHeight / rootFontSSize + 'rem';
    }
  },
  created() {
    // this.onLoad();

  },
  destroyed(){
    evBus.$off(updateDmEv);
  },
  // deactivated() {
  //   evBus.$off(updateDmEv);
  // },
  // activated() {
  //   evBus.$on(updateDmEv, (/**@type {DmItem}*/ dm) => {
  //     const foundDm = this.voteList.find(item => item.number=== dm.number);
  //     if (foundDm) {
  //       foundDm.ticketNum = dm.ticketNum
  //
  //     }
  //   });
  //   console.log("activated");
  // },
  methods: {
    async onLoad() {
      // debugger
      this.$emit('list load')
      this.loading = true
      try {
        const res = await getDmList({pageNum: this.pageNum, pageSize: this.pageSize,});
        res.data.rows.forEach(item => this.voteList.push(item));
        this.finished = this.voteList.length >= res.data.total;
        console.log("this.list: ", this.voteList)
        this.pageNum++
      } catch (e) {
        this.error = e;
        console.log(e);
      } finally {
        this.loading = false;
      }

    },
    gotoRank() {
      this.$router.push({name: 'hostRank'});
    },
    onSearch(text) {
      this.finished = false;
      this.loading = false;
      this.error = null;
      this.searchText = text;
      this.onLoad();
    },
    /**
     * @param ev
     * @param {DmItem} item
     */
    async giveTicket(ev, item) {
      ev.cancelBubble = true;
      this.isModalShow = true;
      this.isGiving = true;
      const userInfo = getUserIdAndNickNameFromRouteQuery(this);
      try {
        const res = await giveTicket({workNumber: item.number, userId: userInfo.id});
        console.log("res.status", res.status);
        this.isGivingFailed = res.status === 1;
      } catch (e) {
        this.isGivingFailed = true;
      } finally {
        this.isGiving = false;
      }
    },

    /**
     * @param {DmItem} item
     */
    gotoDetail(item) {
      const userInfo = getUserIdAndNickNameFromRouteQuery(this);
      this.$router.push({
        name: "host_detail", params: {
          queryParams: item.number,
        },
        query: {
          id: userInfo.id
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.vote-host {
  height: px2rem(2000px);
}

.vote-host-bg {
  margin-top: px2rem(-20px);
  position: relative;
  background: url("~@/assets/vote_info_bg.png") no-repeat px2rem(27px) top;
  //background-position: ;
  background-size: px2rem(690px) px2rem(1080px);
  //min-height: px2rem(2000px);
  padding: px2rem(162px) 0 px2rem(20px) px2rem(53px + 49px);

  &:after {
    display: block;
    content: "";
    height: px2rem(30px);
    width: px2rem(100px);
  }
}

.description {
  padding-left: px2rem(32px);
  width: px2rem(505px);
  height: px2rem(152px);
  color: #fff;
  font-size: px2rem(24px);
  line-height: px2rem(38px);
}

.vote-method {
  box-sizing: border-box;
  color: $lightFontColor;
  line-height: px2rem(36px);
}

.vote-method-1 {
  width: px2rem(560px);
  height: px2rem(187px);
  background: url("~@/assets/method_1.png") no-repeat center center;
  background-size: px2rem(560px) px2rem(187px);
  margin-top: px2rem(10px);
  padding-top: px2rem(16px + 20px +48px);
  padding-left: px2rem(51px + 55px);
}

.vote-method-2 {
  width: px2rem(560px);
  height: px2rem(212px);
  background: url("~@/assets/method_2.png") no-repeat center center;
  background-size: px2rem(560px) px2rem(212px);
  margin-top: px2rem(10px);
  padding-top: px2rem(63.1px);
  padding-left: px2rem(51px + 55px);
}

.vote-method-3 {
  width: px2rem(578px);
  height: px2rem(179px);
  background: url("~@/assets/method_3.png") no-repeat center center;
  background-size: px2rem(578px) px2rem(179px);
  margin-top: px2rem(10px);
  padding-top: px2rem(57px + 21px);
  padding-left: px2rem(51px + 55px);
}

.method-description {
  width: px2rem(380px);
  text-align: justify;
  font-size: px2rem(24px);
  letter-spacing: 0;
  line-height: px2rem(28px);
}

.rank-btn {
  margin-top: px2rem(51px);
  margin-left: px2rem(59px);
}

.search-row {
  margin-top: px2rem(25px);
  margin-bottom: px2rem(25px);
  margin-left: px2rem(12px);
}

.vote-zone-header {
  width: px2rem(695px);
  height: px2rem(232px);
  margin-left: px2rem((750px-695px)/2 + 3px);
}

.vote-zone-list {
  box-sizing: border-box;
  padding: 0 0 0 px2rem(72px);
  width: px2rem(700px);
  flex-direction: row;
  margin-left: px2rem((750px-690px)/2);
  min-height: px2rem(590px);
  overflow: hidden;
  background-image: url("~@/assets/vote_zone_bg.png");
  background-repeat: repeat-y;
  background-size: px2rem(690px) px2rem(590px);
  //margin-top: px2rem(-104px);

  .vote-card:nth-of-type(2n) {
    margin-right: 0;
  }

}

.vote-card {
  //float: left;
  display: inline-flex;
  box-sizing: border-box;
  width: px2rem(280px);
  height: px2rem(410px);
  background-image: linear-gradient(180deg, #00169F 0%, #0027D2 100%);
  border-radius: px2rem(10px);
  margin-right: px2rem(15px);
  margin-bottom: px2rem(15px);
  flex-direction: column;
  justify-content: center;
  padding: px2rem(17px) 0;
  align-items: center;
  overflow: hidden;


  .btn {
    width: px2rem(251px);
    margin-top: px2rem(18px);
  }
}

.vote-rank {
  width: px2rem(183px);
  display: inline-flex;
  justify-content: space-around;
  color: #fff;
  font-size: px2rem(24px);
  margin-bottom: px2rem(5px);
  align-items: center;

}

.vote-avatar-box {
  position: relative;
  width: px2rem(183px);
  height: px2rem(183px);
  overflow: hidden;
  background: #f1f1f1;

  .vote-badge {
    position: absolute;
    box-sizing: border-box;
    padding: 0 px2rem(10px);
    width: px2rem(136px);
    height: px2rem(36px);
    bottom: 0;
    left: 0;
    opacity: 0.85;
    background: #FFAB00;
    border-radius: 0 px2rem(20px) 0 0;
    justify-content: space-between;
    font-size: px2rem(24px);
    align-items: center;

    .vote-mic {
      width: px2rem(18px);
      height: px2rem(21px);
    }
  }

  .vote-avatar {
    width: px2rem(183px);
    height: px2rem(183px);
    object-fit: cover;
  }

}

.vote-player {
  //margin-top: px2rem(13px);
  //margin-bottom: px2rem(13px);
  font-size: px2rem(24px);
  line-height: px2rem(30px);
  margin-top: px2rem(10px);
  color: #fff;
}

.fire-icon {
  width: px2rem(23px);
  height: px2rem(33px);
  transform: translateY(px2rem(-3px));
}

.rank-col {
  height: px2rem(33px);
  line-height: px2rem(33px);
}


.modal-image {
  width: 100%;
  text-align: center;
  margin-top: px2rem(152px);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: px2rem(29px);
}

.modal-content {
  font-size: px2rem(36px);
  color: #F2E630;
  letter-spacing: 0;
  text-align: center;
  width: px2rem(360px);
  margin: 0 auto;
}

.smile-face {
  width: px2rem(432px);
  height: px2rem(152px);
}


.ghost-btn {
  height: px2rem(41px);
}

.vote-zone {
  @include withBg("~@/assets/vote_zone_header.png", px2rem(695px), px2rem(232px), px2rem((750px-695px)/2 + 3px), top);
  padding-top: px2rem(171px);
  //width: px2rem(695px);
  //height: px2rem(232px);
  //margin-left: px2rem((750px-695px)/2 + 3px);
}
</style>
